<template>
  <!-- 歌词组件 -->
  <!-- 没用到 -->
  <div class="sc-song-lyric" ref="scLyric">
    <div :class="['songlist-lyric', { limit: isLimit }]">
      <p class="song-lyric-item" v-for="(item, i) in lyric" :key="i + item.ms">
        {{ item.content }}
      </p>
    </div>
    <p class="song-lyric-item">
      <a class="lyric-height" @click="changeLimit">{{ show }}</a>
    </p>
  </div>
</template>

<script>
import { lrc2Json } from "common/lyric.js";
export default {
  props: {
    lyric: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      isLimit: true,
      show: "[展开]",
    };
  },
  mounted() {
    this.lyric = lrc2Json(this.lyric);
  },
  methods: {
    changeLimit() {
      this.isLimit = !this.isLimit;
      if (this.isLimit) {
        this.show = "[展开]";
        // document.documentElement.scrollTo({
        //   top: 141,
        //   behavior: "smooth",
        // });
        console.log(this.$refs.scLyric);
      } else {
        this.show = "[收起]";
      }
    },
  },
};
</script>

<style>
</style>